// pages/search/index.js

//引入自己封装后的request()
import { request } from '../../request/index.js'
//配置 支持async语法
import regeneratorRuntime, { async } from '../../lib/runtime/runtime'

Page({
  data: {
    goods: [],  //搜索结果数组
    isFocus: false,  //取消按钮 是否显示
    inpValue: ""  //输入框中的值
  },

  TimeId : -1,

  //输入框 input事件
  handleInput(e){
    //console.log(e);
    
    //1 取出输入框的值
    const { value } = e.detail

    //2 检查合法性
    if(!value.trim()){

      //值为空时 
      //清除定时器
      clearTimeout(this.TimeId)

      //隐藏按钮 清空搜索结果数组
      this.setData({
        goods: [],
        isFocus: false
      })

      //值为空 则直接退出
      return
    }

    //显示 取消按钮
    this.setData({
      isFocus: true
    })

    //3 发起请求 获取数据

    clearTimeout(this.TimeId)

    this.TimeId = setTimeout( () => {
      this.qsearch(value)
    }, 1000)
  },

  //根据搜索关键字 发起请求 获取数据
  async qsearch(query){
    const res = await request({
      url: '/goods/qsearch',
      data: {
        query
      }
    })
    //console.log(res);

    this.setData({
      goods: res.data.message
    })
  },

  //点击 搜索框的 取消按钮
  handleCancel(){
    //1 清除定时器
    clearTimeout(this.TimeId)

    //2 将输入框中的值重置为空字符串
    //3 隐藏取消按钮
    //4 将搜索结果数组 重置为空数组
    this.setData({
      inpValue: "",
      isFocus: false,
      goods: []
    })
  },

})

